<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>将页面结构---转换--->vue的template模板字符串---转换--->js对象【虚拟DOM】---转换--->html标签---写入--->页面</p>
    <hr>
    <div id="app"></div>
    <hr>
    <script>
        // vue用于记录模板结构的 真实JS存储数据 【虚拟DOM】
        /*
        虚拟DOM：就是一个JS的普通对象，不过该对象记录用于构建DOM元素必要属性，
                 用该对象结合JS DOM 创建方法可以创建出完整的结构
        */
        let obj = {
            tagName:"div",
            attrs:{
                class:"a b c",
                id:"dom"
            },
            children:[
                "div的文本内容1",
                {
                    tagName:"p",
                    events:{
                        click:function(){
                            alert(1)
                        }
                    },
                    children:[
                        "提示消息"
                    ]
                },
                "div的文本内容2"
            ]
        }

        // 该方法将 js 对象以递归函数的方式 转换为了HTML标签
        function renderDom(obj={}){
            // 基于传入数据的 tagName 创建元素
            let tempBoxDom = document.createElement(obj.tagName);
            // 判断是否存在attrs属性
            if(obj.attrs){
                // 如果存在为创建的DOM循环添加属性
                for (let key in obj.attrs) {
                    tempBoxDom.setAttribute(key,obj.attrs[key])
                }
            }
            // 判断是否存在events属性
            if(obj.events){
                // 如果存在为创建的DOM循环添加事件
                for (let key in obj.events) {
                    tempBoxDom.addEventListener("click",obj.events[key])
                }
            }
            // 基于chilrdern循环创建和添加子元素
            obj.children.forEach(item => {
                // 初始化空字符串节点-为后续的appendChild方法提供有效参数
                let node = document.createTextNode("");
                if(typeof(item)=="string"){
                    // 如果元素值是 string类型，认为是字符串，创建字符串节点
                    node = document.createTextNode(item);
                }else{
                    // 如果不是，认为是一个描述html结构的JS 对象数据，基于递归调用创建该节点
                    node = renderDom(item)
                }
                tempBoxDom.appendChild(node)
            });

            return tempBoxDom
        }
        let htmlDom = renderDom(obj)
        console.log(htmlDom);

        let boxDom = document.querySelector("#app")
        boxDom.appendChild( htmlDom )
    </script>
</body>
</html>